<template>
  <div>
    <div v-for="item in shopList" :key="item.id" class="shop_li">
      <img
        :src="'https://elm.cangdu.org/img/' + item.image_path"
        class="shop_img"
      />
      <div class="shop_right">
        <div class="shop-title">
          <header>
            <h4>{{ item.name }}</h4>
            <h5>{{ item.rating }}</h5>
          </header>
          <div class="rating_order_num">
            <section class="rating_order_num_right">
                <span
                  class="delivery_style delivery_left"
                  v-if="item.delivery_mode"
                >{{ item.delivery_mode.text }}</span
                >
              <span class="delivery_style delivery_right">准时达</span>
            </section>
          </div>
        </div>
        <div class="fee_distance">
          <p class="fee">
            ¥{{ item.float_minimum_order_amount }}起送
            <span class="segmentation">/</span>
            {{ item.piecewise_agent_fee.tips }}
          </p>
          <p class="distance_time">
              <span v-if="Number(item.distance)"
              >{{
                  item.distance > 1000
                    ? (item.distance / 1000).toFixed(2) + "km"
                    : item.distance + "m"
                }}
                <span class="segmentation">/</span>
              </span>
            <span v-else>{{ item.distance }}</span>
            <span class="segmentation">/</span>
            <span class="order_time">{{ item.order_lead_time }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      shopList: [],
      star: []
    }
  },
  methods: {
    getShopList () {
      this.$api.believe.login().then(res => {
        this.shopList = res.data
      })
    }
    // rating () {
    //   for (let i = 0; i < this.shopList.length - 1; i++) {
    //     let n = Math.parseInt(this.shopList[i].rating)
    //     console.log(n)
    //     this.star[i] = (n) => '★★★★★☆☆☆☆☆☆'.slice(5 - n, 10 - n)
    //   }
    // }
  },
  mounted () {
    this.getShopList()
  }
}
</script>

<style scoped>

</style>
